<template>
	<view class="body">
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
			</view>
			<view class="head_mid">
				密码找回
			</view>
			<view class="head_left">

			</view>
		</view>
		<view class="body-box">
			<view class="title-box">
				发送<text>验证码</text>到：
			</view>
			<view class="choice-box" @tap="choiceshouji">
				<view class="left-box">
					<image v-if="isshouji" src="../../../static/index/theselected.png" mode=""></image>
					<image v-else src="../../../static/index/uncheck.png" mode=""></image>
					<text>手机</text>
				</view>
				<view class="right-box">
					<text v-if="mobile==''">未绑定</text>
					<text v-else>{{mobile}}</text>
					<image src="/static/right.png" mode=""></image>
				</view>
			</view>
			<view class="choice-box" @tap="choiceyouxiang">
				<view class="left-box">
					<image v-if="isyouxiang" src="../../../static/index/theselected.png" mode=""></image>
					<image v-else src="../../../static/index/uncheck.png" mode=""></image>
					<text>邮箱</text>
				</view>
				<view class="right-box">
					<text v-if="email!=''">{{email}}</text>
					<text v-else>未绑定</text>
					<image src="/static/right.png" mode=""></image>
				</view>
			</view>
			<view class="body_item">
				<input type="number" value="" placeholder="请输入验证码" maxlength="4" v-model="code" @change="conso" />
				<text class="getyanzhengma" @tap="getCode" v-if="showGetCode">获取验证码</text>
				<text class="getyanzhengma" v-text="time" v-else></text>
			</view>
		</view>
		<view class="btn" @tap="toNext">
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshouji: true,
				isyouxiang: false,
				mobile: '',
				email: '',
				showGetCode: true, //点没点获取验证码
				time: 59,
				code: '',
			};
		},
		onShow() {
			var user_info = uni.getStorageSync('user_info');
			this.mobile = user_info.mobile;
			this.email = user_info.mail;

		},
		methods: {
			conso() {
				console.log(this.code)
			},
			choiceshouji() {
				this.isshouji = true
				this.isyouxiang = false
			},
			choiceyouxiang() {
				this.isyouxiang = true
				this.isshouji = false
			},
			getCode() {
				if (this.isshouji) {
					var data = {
						mobile: this.mobile
					};
					var me = this;
					this.myAjaxNew({
						model: 'user',
						controllerName: 'sms',
						actionName: 'send',
						data: data,
						successBack: function(res) {
							console.log(res);
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
							if (res.data.code == 0) { //返回成功
								me.showGetCode = false;
								me.computeTime();
							}
						},
					})
				} else {
					var data = {
						mail: this.email
					};
					var me = this;
					this.myAjaxNew({
						model: 'user',
						controllerName: 'mail',
						actionName: 'send',
						data: data,
						successBack: function(res) {
							console.log(res);
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
							if (res.data.code == 0) {
								me.showGetCode = false;
								me.computeTime();
							}
						},
					})
				}
			},
			computeTime() {
				var me = this;
				setInterval(function() {
					if (me.time > 0) {
						me.time--;
					} else {
						me.showGetCode = true;
						me.time = 59;
					}
				}, 1000)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toNext() {
				if (this.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else {
					var me = this;
					if (this.isshouji) {
						var data = {
							code: me.code,
							mobile: me.mobile
						}
						this.myAjaxNew({
							model: 'user',
							controllerName: 'sms',
							actionName: 'validate',
							data: data,
							successBack: function(res) {
								console.log(res)
								if(res.data.message=='成功'){
								uni.navigateTo({
									url:'/pages/My/setPass/setPass?setPass=true'
								})
								}else{
									uni.showToast({
										title:res.data.message,
										icon:'none'
									})
								}
							},
						})
					} else {
						var data = {
							code: me.code,
							mobile: me.email
						}
						this.myAjaxNew({
							model: 'user',
							controllerName: 'mail',
							actionName: 'validate',
							data: data,
							successBack: function(res) {
								console.log(res)
							},
						})
					}

				}
			},
		}
	}
</script>

<style scoped>
	.body {
		height: 100%;
		background: #FFFFFF;
	}

	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
		box-sizing: border-box;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}
	.head_mid{
		padding-top: 90upx;
	}

	.head_right {
		width: 150upx;
	}

	.title-box text {
		color: #47CECF;
	}

	.body-box {
		padding: 0 24upx;
		color: #333333;
		font-size: 32upx;
		padding-top: 168upx;
	}

	.choice-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40upx;
		padding-bottom: 10upx;
		border-bottom: 1upx solid #e6e6e6;
	}

	.right-box,
	.left-box {
		display: flex;
		align-items: center;
	}

	.right-box {
		color: #999999;
		font-size: 28upx;
	}

	.right-box image {
		width: 16upx;
		height: 28upx;
		margin-left: 20upx;
	}

	.left-box image {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.body_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 80upx;
		padding-bottom: 10upx;
		border-bottom: 1upx solid #e6e6e6;
	}

	.body_item input {
		width: 80%;
	}

	.getyanzhengma {
		width: 120px;
		display: flex;
		flex-direction: row-reverse;
		border-left: 1upx solid #e6e6e6;
	}

	.btn {
		margin-top: 100upx;
	}
</style>
